<template>
	<view class="wrapper" >
		<view  class="chat_main">
			<!-- 我的文本消息 -->
			<view class="my_new new flex-end center">
				<!-- 文本消息 -->
				<view class="new_text f28">嘿，你好！</view>
				<image src="../../static/chatFriend/right.png" mode="aspectFill" class="arr"></image>
				<!-- 头像 -->
				<image src="../../static/delet/sqq.png" mode="aspectFill" class="avatar"></image>
			</view>
			<!-- 对方的文本消息 -->
			<view class="new flex-start center">
				<!-- 头像 -->
				<image src="../../static/delet/sqq.png" mode="aspectFill" class="avatar"></image>
				<image src="../../static/chatFriend/left.png" mode="aspectFill" class="arr"></image>
				<!-- 文本消息 -->
				<view class="new_text f28">人和人之间舒服的关系，是可以一直不说话，也可以随时说话。</view>
				<!-- 阅读状态 -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		};
	},
	onShow() {},
	onLoad() {},
	methods: {
		
	}
};
</script>

<style lang="scss">

.new {
	padding: 10rpx 25rpx;
	align-items: flex-start;
	.read {
		background: #74b5ed;
	}
	.new_text {
		padding: 23rpx 21rpx;
		max-width: 515rpx;
		min-width: 168rpx;
		background: #ffffff;
	}
	.arr {
		width: 10rpx;
		height: 15rpx;
		margin: 26rpx 0 0 10rpx;
	}
	.avatar {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
	}
}
.my_new {
	.new_text {
		background: #33acff;
	}
	.arr {
		margin: 26rpx 10rpx 0 0;
	}
}
.newFriend {
	width: 380rpx;
	height: 50rpx;
	background: rgba(188, 188, 188, 1);
	border-radius: 25rpx;
	margin: 20rpx auto;
}
page {
	background: #f3f3f3;
}
</style>
